<template>
  <div class="index" ref="index">
    <!-- 导航 -->
    <Nav @loginSwitch="loginSwitch"></Nav>
    <Navt></Navt>
    <div class="cont">
      <div class="lt">
        <nav>
          <a :class="{ active: switchToggle[0] }" @click="switchCont(0)"
            >热门</a
          >
          <span>|</span>
          <a :class="{ active: switchToggle[1] }" @click="switchCont(1)"
            >最新</a
          >
        </nav>
        <ul class="list">
          <li v-for="(item, index) in data" :key="index">
            <div class="author" @mouseleave="closeAuthorInfo(index)">
              <span 
              class="name" 
              @mouseenter="openAuthorInfo(index), getAuthorData()"
              @mouseleave="leaveaAuthorInfo(index)">
              {{item.nick_name}}
              </span>
              <span class="divider">·</span>
              <span class="tag">{{item.tags[0].tag_name}}</span>
              <!-- 作者信息start -->
              <div 
              class="author-info" 
              v-show="authorIsShow[index]" 
              @mouseenter="openAuthorInfo(index)"
              @mouseleave="leaveaAuthorInfo(index)">
                <div class="info-tp">
                  <div class="pic">
                    <img :src="'http://api_devss.wanxikeji.cn/'+item.icon" alt="">
                  </div>
                  <div class="text">
                    <h5>{{item.nick_name}}</h5>
                    <p class="des">这个人很懒，没有留下任何东西</p>
                  </div>
                </div>
                <div class="info-bt">
                  <div class="follow">
                    <p><span class="num">321</span></p>
                    <p><span>关注</span></p>
                  </div>
                  <div class="Followers">
                    <p><span class="num">111</span></p>
                    <p><span>关注者</span></p>
                  </div>
                  <el-button type="success" plain v-if="!followerArray[index]"  @click="follow(item.user_id, index)">关注</el-button>
                  <el-button type="success" plain v-else @click="cancelFollow(item.user_id, index)">已关注</el-button>
                </div>
              </div>
              <!-- 作者信息end -->
            </div>
            <h3 @click="jumpToArticle(item.article_id)">{{item.title}}</h3>
            <div class="btn">
              <button class="fabulous">
                <i class="iconfont icon-dianzan"></i>
                <span>1297</span>
              </button>
              <router-link :to="'/article/' + item.article_id + '?#comment'" tag="button"  class="comment">
                <i class="iconfont icon-pinglun2"></i>
                <span>{{item.comment_num}}</span>
              </router-link>
            </div>
          </li>
        </ul>
      </div>
      <div class="rt">
        <!-- 登录 -->
        <div class="toLogin" v-if="!getVuxToken">
          <h4>掘铁 - juetie.cn</h4>
          <p class="title-des">一个帮助开发者成长的社区</p>
          <el-button type="primary" @click="loginSwitch">注册登录</el-button>
          <p class="login-des">注册登录即表示</p>
          <p class="agreement">
            同意 <router-link to="/userAgree"> 用户协议</router-link>、
            <router-link to="/privacyPolicy">隐私政策</router-link>
          </p>
        </div>
        <!-- 下载 -->
        <div class="download">
          <div class="downlod-lt"></div>
          <div class="downlod-rt">
            <h5>下载掘铁客户端</h5>
            <p>一个帮助开发者成长的社区</p>
          </div>
        </div>
        <!-- 作者榜单 -->
        <div class="authorRanking">
          <h5>
            <svg class="icon" aria-hidden="true">
              <use xlink:href="#icon-jiangpai"></use>
            </svg>
            作者榜
          </h5>
          <ul class="authorRanking-list">
            <li>
              <div class="authorRanking-list-lt">
                <img src="http://api_devss.wanxikeji.cn/app/pic/20210304/20210304075633227.jpg" alt="">
              </div>
              <div class="authorRanking-list-rt">
                <p class="name">杰尼龟</p>
                <p class="readingVolume">总阅读量：2522</p>
              </div>
            </li>
            <li>
              <div class="authorRanking-list-lt">
                <img src="http://api_devss.wanxikeji.cn/app/pic/20210304/20210304075633227.jpg" alt="">
              </div>
              <div class="authorRanking-list-rt">
                <p class="name">杰尼龟</p>
                <p class="readingVolume">总阅读量：2522</p>
              </div>
            </li>
            <li>
              <div class="authorRanking-list-lt">
                <img src="http://api_devss.wanxikeji.cn/app/pic/20210304/20210304075633227.jpg" alt="">
              </div>
              <div class="authorRanking-list-rt">
                <p class="name">杰尼龟</p>
                <p class="readingVolume">总阅读量：2522</p>
              </div>
            </li>
          </ul>
          <router-link class="completeRanking" to="/authorRanking">完整榜单 &gt;&gt;</router-link>
        </div>
        <!-- 其他 -->
        <div class="other">
          <div class="other-item">
            <div class="other-item-lt"></div>
            <div class="other-item-rt">掘铁社区漫游指南</div>
          </div>
          <div class="other-item">
            <div class="other-item-lt"></div>
            <div class="other-item-rt">下载掘铁浏览器插件</div>
          </div>
          <div class="other-item">
            <div class="other-item-lt"></div>
            <div class="other-item-rt">前往掘铁翻译计划</div>
          </div>
        </div>
        <!-- 关于版权 -->
        <div class="copyer">
          <p>
            <a href="javaScript:;">关于</a><span>·</span
            ><a href="javaScript:;">营业执照</a><span>·</span
            ><a href="javaScript:;">友情链接</a>
          </p>
          <p>
            <a href="javaScript:;">用户协议</a><span>·</span
            ><a href="javaScript:;">隐私政策</a><span>·</span
            ><a href="javaScript:;">使用指南</a>
          </p>
          <p><a href="javaScript:;">京ICP备18012699号-3</a></p>
          <p><a href="javaScript:;">京公网安备11010802026719号-3</a></p>
          <p>版权所有：成都成成信息技术有限公司</p>
          <p>公司地址：北京市海淀区信息路甲28号13层B座13B-5</p>
          <p>公司座机：010-83434395</p>
          <p>举报邮箱： <a href="javaScript:;">feedback@xitu.io</a></p>
          <p><a href="javaScript:;">©2021 掘铁</a></p>
          <div class="contact">
            <div class="contact-item iconfont icon-weibo"></div>
            <div class="contact-item iconfont icon-weixin">
              <div class="QR">
                <p>微信扫一扫</p>
                <div class="img-wrapper"></div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <!-- 登录组件 -->
    <div class="loginImport" v-show="getVuxToLogin">
      <Login @loginSwitch="loginSwitch"></Login>
    </div>
    <!-- 回到顶部 -->
    <div 
    class="toTop iconfont icon-shang"
    v-show="toTopIsShow"
    @click="toTop"></div>
  </div>
</template>
<script>
import Nav from "@/components/nav.vue"
import Login from "@/components/login.vue"
import Navt from "@/components/navt.vue"
export default {
  components: {
    Nav,
    Login,
    Navt
  },
  data() {
    return {
      switchToggle: [true, false], // 排序文字样式切换
      token: null, // 记录token
      data: [], // 列表数据 
      isInAuthorInfo: [
        false, false, false, false, false,
        false, false, false, false, false
      ], // 鼠标是否进入作者信息栏
      authorIsShow: [
        false, false, false, false, false,
        false, false, false, false, false
      ] , // 作者信息是否展示
      toTopIsShow: false, // 回到顶部按钮是否显示
      el: null, // 页面最大的容器
      windowHeight: 0, // 视窗高度
      page: 1, // 页码
      concernList: [], // 用户关注列表
      followerArray: [], // 关注按钮HTML内容
    }
  },
  methods: {
    // 内容列表切换
    switchCont(index) {
      console.log(index);
      for (let i = 0, len = this.switchToggle.length; i < len; i++) {
        this.switchToggle[i] = false;
      }
      this.switchToggle[index] = true;
      this.$forceUpdate();
      console.log(this.switchToggle[index]);
      if (index === 0) {
        //
      } else if (index === 1) {
        //
      }
    },
    // 登录组件切换
    loginSwitch() {
      this.$store.commit("loginSwitch")
    },
    // 获取作者信息，展示栏显示
    getAuthorData() {
    },
    // 打开作者信息展示
    openAuthorInfo(index) {
      this.isInAuthorInfo[index] = true
      this.authorIsShow[index] = true
      this.$forceUpdate()
      
    },
    // 移出作者信息框
    leaveaAuthorInfo(index) {
      this.isInAuthorInfo[index] = false
    },
    // 关闭作者信息展示
    closeAuthorInfo(index) {
      setTimeout(() => {
        if (this.isInAuthorInfo[index]) return
        else {
          this.authorIsShow[index] = false
          this.$forceUpdate()
        }
      }, 500);
    },
    // 获取列表信息
    getListData() {
      this.axios({
        method: "post",
        url: "api/articleList",
        data: {
          page: this.page, 
          size: 10, 
          type: 1
        }
      })
      .then( res => {
        if (this.page === 1)  this.data = res.data.data.data
        else 
        {
          this.data = [...this.data, ...res.data.data.data]
        }
        // 获取关注列表
        this.getConcerList()
      })
      .catch( err => {
        console.log(err)
      })
    },
    // 跳转文章内容
    jumpToArticle(articleId) {
      this.$router.push(`/article/${articleId}`)
    },
    // 关注用户
    follow (user_id, index) {
      this.followerArray[index] = true
      this.$forceUpdate()
      this.axios({
        url: "api/concern",
        method: "post",
        data: {token: this.$store.state.token, be_concern_user_id: user_id}
      })
      .then( res => {
        console.log(res)
      })
      .catch( err => {
        console.log(err)
      })
    },
    // 取消关注
    cancelFollow(user_id, index) {
      console.log(this.followerArray[index])
      this.followerArray[index] = false
      this.$forceUpdate()
      this.axios({
        url: "api/concernDel",
        method: "post",
        data: {token: this.$store.state.token, be_concern_user_id: user_id}
      })
      .then( res => {
        console.log(res)
       
      })
      .catch( err => {
        console.log(err)
      })
    },
    // 回到顶部
    toTop() {
      document.documentElement.scrollTop = 0
    },
    // 滚动条函数
    Scroll() {
      if (this.$route.name !== "Index") return
      let scrollTop = document.documentElement.scrollTop
      
      if (scrollTop >= 900) this.toTopIsShow = true
      else this.toTopIsShow = false
      
      if (scrollTop + this.windowHeight - this.el.offsetHeight > -1) {
        this.page ++
        this.getListData()
        this.getConcerList()
      }
    },
    // 获取关注列表
    getConcerList() {
      this.axios({
        url: "api/concernList",
        method: "post",
        data: {user_id: this.$store.state.userID}
      })
      .then( res => {
        console.log(res.data.data.my_concern)
        if (this.page === 1) this.concernList = res.data.data.my_concern
        else this.concernList.push(res.data.data.my_concern)
        // 关注列表匹配
        this.concernListMatch()
      })
      .catch( err => {
        console.log(err)
      })
    },
    // 关注列表匹配
    concernListMatch() {
      for ( let i = 0, len = this.data.length; i < len ; i++) {
        this.followerArray[i] = false
        for ( let j = 0, len2 = this.concernList.length; j < len2; j++) {
          if ( this.data[i].user_id === this.concernList[j].be_concern_user_id) {
            this.followerArray[i] = true 
          }
        }
      }
    },
  },
  computed: {
    // 获取token
    getVuxToken() {
      return this.$store.state.token
    },
    // 获取登录状态
    getVuxToLogin() {
      return this.$store.state.toLogin
    },
   
  },
  mounted() {
    
    // 获取初始数据
    this.getListData()
    // 滚动条监听
    window.addEventListener("scroll", this.Scroll)
    // 获取页面最大的容器
    this.el = this.$refs.index
    // 获取视窗高度
    this.windowHeight = window.innerHeight
    
  }
};
</script>

<style lang="scss" scoped>
body {
  background-color: #f4f5f5;
}                                             
.index .cont {
  display: flex;
  justify-content: space-between;
  width: 960px;
  margin: 15px auto 0;
}

.index .cont .lt {
  box-sizing: border-box;
  width: 700px;
  padding: 20px;
  background-color: rgb(255, 255, 255);
}

.lt > nav {
  padding-bottom: 10px;
  border-bottom: 1px solid #f4f4f4;
}

.lt > nav a {
  padding: 0 10px;
  transition: all 0.3s;
}

.lt > nav a.active {
  color: #007fff;
}

.lt > nav a:hover {
  color: #007fff;
}

.lt > nav a:first-child {
  padding-left: 0;
}

.lt > nav span {
  color: #f4f4f4;
}

.lt > .list li {
  position: relative;
  padding: 10px 0;
  border-bottom: 1px solid #f4f4f4;
  cursor: pointer;
}

.lt > .list li:hover {
  background-color: #FCFCFC;
}


.lt > .list li p {
  color: #ccc;
}

.lt > .list li .author {
  font-size: 12px;
  color: #ccc;
  transition: all .3s;
  
  span.divider  {
    margin: 0 5px;
  }
  
  span.name:hover,
  span.tag:hover {
    color: #007fff;
  }
  
}

.lt > .list li h3 {
  letter-spacing: 2px;
}

.lt > .list li {
  .author-info {
    position: absolute;
    bottom: 100%;
    left: -70px;
    box-sizing: border-box;
    width: 267px;
    height: 160px;
    padding: 20px;
    background-color: #fff;
    box-shadow: 0 0 20px 0 #ccc;
    z-index: 999;
    
    &::after {
      display: block;
      content: "";
      position: absolute;
      bottom: -20px;
      left: 25%;
      border: 10px solid transparent;
      border-top-color: #fff;
    }
    
    .info-tp {
      display: flex;
      
      .pic {
        width: 60px;
        height: 60px;
        margin-right: 12px;
        border-radius: 50%;
        overflow: hidden;
        
        img {
          width: 100%;
          height: 100%;
        }
      }
      
      h5 {
        margin: 0;
        color: #333;
        font-size: 15px;
      }
      
      .des {
        max-width: 155px;
        margin-top: 20px;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        font-size: 12px;
        
      }
    }
    
    .info-bt {
      display: flex;
      justify-content: space-between;
      align-items: flex-end;
      margin-top: 20px;
      
      span {
        font-size: 13px;
        color: #8f969c;
        
        &.num {
          font-weight: bold;
          font-size: 15px;
          color: #17181a;
        }
      }
      
      button {
        padding: 0 20px;
        height: 30px;
      }
    }
  }
}

.lt > .list li h3:hover {
  text-decoration: underline;
}

.lt > .list li .btn {
  display: flex;
}

.lt > .list li .btn button {
  height: 24px;
  padding: 0 5px;
  font-size: 12px;
  color: #ccc;
  background-color: #fff;
  border: 1px solid #f4f4f4;
  cursor: pointer;
  transition: all 0.3s;
}

.lt > .list li .btn button + button {
  border-left: none;
}

.lt > .list li .btn button:hover {
  background-color: #f4f5f5;
}

.lt > .list li .btn .comment {
  display: flex;
  align-items: center;
}

.lt > .list li h3 {
  margin: 10px 0 15px;
}

.index .cont .rt {
  flex: 1;
  margin-left: 20px;
  background-color: #f4f5f5;
}

.rt .toLogin {
  margin-bottom: 20px;
  padding: 20px;
  background-color: #fff;
}

.rt .toLogin p {
  font-size: 13px;
}

.rt .toLogin p.title-des {
  margin-top: 5px;
}

.rt .toLogin .el-button {
  width: 100%;
  padding: 7px 20px;
  margin-top: 10px;
}

.rt .toLogin p.login-des {
  margin-top: 20px;
}

.rt .toLogin p.agreement {
  margin-top: 5px;
}

.rt .toLogin p.agreement a {
  color: #007fff;
}

.rt .copyer {
  margin-top: 20px;
  font-size: 13px;
  color: #909090;
}

.rt .copyer p {
  margin-bottom: 5px;
}

.rt .copyer p span {
  margin: 0 5px;
}

.rt .copyer p a {
  transition: all 0.3s;
}

.rt .copyer p a:hover {
  color: #007fff;
}

.rt { 
  .download {
    display: flex;
    padding: 20px;
    background-color: #fff;
    cursor: pointer;
    
    .downlod-lt {
      width: 50px;
      height: 50px;
      margin-right: 6px;
      background: url("../../assets/img/index/download-QR.png") center no-repeat;
      background-size: cover;
    }
    
    .downlod-rt {
      h5 {
        margin: 0;
        color: #333;
        font-size: 14px;
      }
      
      p {
        margin-top: 6px;
        color: #909090;
        font-size: 12px;
      }
    }
  }
  
  .authorRanking {
    margin-top: 20px;
    padding: 20px 0 0;
    background-color: #fff;

    h5 {
      margin: 0;
      padding:0 20px 10px;
      color: #333;
      border-bottom: 1px solid #f4f4f4;
    }
    
    .authorRanking-list {
      li {
        display: flex;
        padding: 10px 20px;
        .authorRanking-list-lt {
          width: 45px;
          height: 45px;
          border-radius: 50%;
          overflow: hidden;
          
          img {
            width: 100%;
            height: 100%;
          }
        }
        .authorRanking-list-rt {
          margin-top: 5px;
          margin-left: 10px;
          font-size: 14px;
          .name {
            color: #333;
          }
          
          .readingVolume {
            margin-top: 5px;
            font-size: 12px;
            color: #909090;
          }
        }
        
      }
    }
    
    a {
      display: block;
      height: 42px;
      border-top: 1px solid #f4f4f4;
      text-align: center;
      line-height: 42px;
      color: #007fff;
      font-weight: bold;
      font-size: 14px;
    }
  }
  
  .other {
    margin-top: 20px;
    padding: 20px;
    font-size: 14px;
    color: #333;
    background-color: #fff;
    
    .other-item {
      display: flex;
      cursor: pointer;
      
      .other-item-lt {
        width: 36px;
        height: 36px;
        margin-right: 10px;
        
      }
      
      &+.other-item {
        margin-top: 10px;
      }
      
      &:nth-child(1) .other-item-lt {
        background: url("../../assets/img/index/communication.png") center no-repeat;
        background-size: cover;
      }
      &:nth-child(2) .other-item-lt {
        background: url("../../assets/img/index/unit.png") center no-repeat;
        background-size: cover;
      }
      &:nth-child(3) .other-item-lt {
        background: url("../../assets/img/index/translate.png") center no-repeat;
        background-size: cover;
      }
      
      .other-item-rt {
        line-height: 36px;
      }
    }
  }

  .copyer {
    .contact {
      display: flex;

      .contact-item {
        font-size: 25px;
        cursor: pointer;

        &:first-child {
          color: rgb(210, 26, 26);
        }
        &:last-child {
          position: relative;
          margin-left: 10px;
          color: rgb(93, 186, 81);

          &:hover {
            .QR {
              display: block;
            }
          }

          .QR {
            display: none;
            position: absolute;
            top: 35px;
            left: -30px;
            width: 129px;
            background-color: #fff;

            p {
              margin: 0;
              text-align: center;
              font-size: 12px;
              color: #ccc;
            }

            .img-wrapper {
              width: 100%;
              height: 129px;
              background: #ccc url("../../assets/img/index/QR-code.jpeg") center
                no-repeat;
              background-size: cover;
              transform: rotate(180deg);
            }
          }
        }
      }
    }
  }
}

.loginImport {
  position: fixed;
  top: 0;
  left: 0;
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.1);
  z-index: 999;
}
// 回到顶部
.toTop {
  position: fixed;
  bottom: 40px;
  right: 40px;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  text-align: center;
  line-height: 40px;
  color: #909090;
  font-size: 12px;
  box-shadow: 0 0 20px 0 #ccc;
  background: #fff;
  cursor: pointer;
}
</style>

